<template>
  <el-card shadow="never"
           style="min-height: 383px;overflow: auto;">
    <div slot="header"
         class="clearfix">
      <div class=" flex-between ">
        <div class="flex">
          <div class="line"></div>
          <div class="fontSize16"
               style="font-weight: 700;">订单统计 </div>
        </div>
        <el-button style="float: right; padding: 3px 0"
                   type="text"></el-button>
      </div>

    </div>

    <div class="fourPalaceGrid">
      <div v-for="(item,index) in defaultData"
           :key="index"
           class="singlePalaceGrid flex-column">
        <router-link :to="item.url">
          <div class="flex-column">
            <img class="icon"
                 :src="item.icon"
                 alt="">
            <div class="m-top10">

              {{ item.title }}
            </div>
          </div>
        </router-link>
      </div>
      <!-- <div class="singlePalaceGrid flex-column">
        <img class="icon"
             src="../../../../assets/会员卡首页/组合 1046.png"
             alt="">
        <div class="m-top10">

          订单列表
        </div>
      </div>
      <div class="singlePalaceGrid flex-column">
        <div style="font-weight: 700;font-size:  24px;">
          <img class="icon"
               src="../../../../assets/会员卡首页/组合 1047.png"
               alt="">
        </div>
        <div class="m-top10">

          商品管理
        </div>
      </div>
      <div class="singlePalaceGrid flex-column">
        <img class="icon"
             src="../../../../assets/会员卡首页/组合 1048.png"
             alt="">
        <div class="m-top10">

          套餐卡管理
        </div>
      </div>
      <div class="singlePalaceGrid flex-column">
        <img class="icon"
             src="../../../../assets/会员卡首页/组合 1049.png"
             alt="">
        <div class="m-top10">

          用户管理
        </div>
      </div>
      <div class="singlePalaceGrid flex-column">
        <img class="icon"
             src="../../../../assets/会员卡首页/组合 1050.png"
             alt="">
        <div class="m-top10">

          财务明细
        </div>
      </div> -->
    </div>

  </el-card>
</template>
  
  <script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent } from 'echarts/components';
// import VChart from 'vue-echarts';
import 'echarts-wordcloud';
import { wordCloudColor } from 'ele-admin';
import { getWordCloudList } from '@/api/dashboard/analysis';
import { echartsMixin } from '@/utils/echarts-mixin';

use([CanvasRenderer, TooltipComponent]);

export default {
  //   components: { VChart },
  mixins: [echartsMixin(['hotSearchChart'])],

  data () {
    const defaultData = [
      {
        icon: require('../../../../assets/会员卡首页/组合 1045.png'),
        title: '套餐卡订单',
        url: '/order/packageOrderList'
      },
      {
        icon: require('../../../../assets/会员卡首页/组合 1046.png'),
        title: '订单列表',
        url: '/order/goodsOrderList',
        color: '#95de64'
      },
      {
        icon: require('../../../../assets/会员卡首页/组合 1047.png'),
        title: '商品管理',
        url: '/goods/goodsList',
        color: '#ff9c6e'
      },
      {
        icon: require('../../../../assets/会员卡首页/组合 1048.png'),
        title: '套餐卡管理',
        url: '/package/packageList',
        color: '#b37feb'
      },
      {
        icon: require('../../../../assets/会员卡首页/组合 1049.png'),
        title: '用户管理',
        url: '/user/user',
        color: '#b37feb'
      },
      {
        icon: require('../../../../assets/会员卡首页/组合 1050.png'),
        title: '财务管理',
        url: '/financialManagement/financialDetails',
        color: '#b37feb'
      }
    ];
    return {
      defaultData,
      // 词云图表配置
      hotSearchChartOption: {}
    };
  },
  created () {
    this.getWordCloudData();
  },
  methods: {
    /* 获取词云数据 */
    getWordCloudData () {
      getWordCloudList()
        .then((data) => {
          this.hotSearchChartOption = {
            tooltip: {
              show: true,
              confine: true,
              borderWidth: 1
            },
            series: [
              {
                type: 'wordCloud',
                width: '100%',
                height: '100%',
                sizeRange: [12, 24],
                gridSize: 6,
                textStyle: {
                  color: wordCloudColor
                },
                emphasis: {
                  textStyle: {
                    shadowBlur: 8,
                    shadowColor: 'rgba(0, 0, 0, .15)'
                  }
                },
                data: data
              }
            ]
          };
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
  </script>
  <style lang="less" scoped>
.line {
  width: 4px;
  height: 25px;
  margin-right: 5px;
  background: rgb(90, 158, 247);
}
.fourPalaceGrid {
  display: flex;
  flex-wrap: wrap;
  .singlePalaceGrid {
    .icon {
      width: 52px;
      height: 52px;
    }
    flex: 33.3%; /*0 不放大  0 不收缩  子项大小为父容器25%*/

    height: 132px;

    align-items: center;
    box-sizing: border-box;

    // border: 1px solid #f5f6fb;
    .accumulateNum {
      height: 62px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .Num {
        color: #1e6ceb;
        font-size: 20px;
      }
    }
  }
  .icon {
    width: 32px;
    height: 32px;
  }
}
</style>
  